import { Swiper, Toast } from 'antd-mobile'
import VideoComponent from './VideoComponent'
import Player from 'xgplayer';

const colors = ['#e4fabd', '#ffcfac', '#ace0ff', '#bcffbd']
let currentIndex: number = 0;
let playerInstance:Array<Player | null> = []

const returnInstance = (_player: Player) => {
  playerInstance.push(_player)
  console.log(playerInstance);
}

setTimeout(() => {
  console.log(playerInstance[2])
  playerInstance&&(playerInstance[1] as Player).play()
}, 2000)

const items = (_currentIndex: number) => colors.map((color, index) => (
  <Swiper.Item key={index}>
    <VideoComponent domIndex={index} returnInstance={returnInstance}/>
  </Swiper.Item>
))

const changeCb = (_num: number) => {
  currentIndex = _num;
}

export default () => {
  return <Swiper 
    direction='vertical' 
    style={{ height: '100vh', backgroundColor: '#000' }} 
    indicator={() => null}
    onIndexChange={changeCb}
  >{items(currentIndex)}</Swiper>

}